<template>
  <view class="content">
    <roc-navbar title="首页" :autoBack="false"></roc-navbar>
    <view class="u-p-10">
      <roc-title title="首页"></roc-title>
      <view class="u-m-b-10">如何创建 uni-admin-roc(UAR) 项目？</view>
      <view class="u-m-b-10" style="color: #c00">命令行执行：npx roc-cli create 项目名</view>
      <view class="u-m-b-10">选择：uni-admin-roc(UAR)</view>
      <view class="u-m-b-10" style="display: flex; align-items: center">
        代码生成器：
        <u-link
          href="https://github.com/rocyuan666/code-generator-var/releases"
          text="代码生成器下载"
        ></u-link>
      </view>
      <roc-title title="柱状图+点击获取索引"></roc-title>
      <view class="charts-box">
        <qiun-data-charts
          type="column"
          :opts="{ extra: { column: { type: 'stack' } } }"
          :eopts="{ xAxis: { axisLabel: { color: '#666' } } }"
          :chartData="chartsData1"
          :echartsH5="true"
          :echartsApp="true"
          @getIndex="getIndex"
        />
      </view>
      <roc-title title="柱状统计图"></roc-title>
      <view class="charts-box">
        <qiun-data-charts
          type="area"
          :opts="{
            yAxis: { data: [{ min: 0 }] },
            extra: { area: { type: 'curve', addLine: true, gradient: true } },
          }"
          :chartData="chartsData2"
          :echartsH5="true"
          :echartsApp="true"
        />
      </view>
    </view>
  </view>
</template>

<script>
import { cloneDeep } from 'lodash-es'
// 下面是演示数据，项目中不需要引用，数据需要从服务器获取
import mockdata from './mockdata.json'

export default {
  data() {
    return {
      chartsData1: {},
      chartsData2: {},
    }
  },
  onLoad() {
    this.handleChart1Data()
    this.handleChart2Data()
  },
  onShow() {
    this.authToLogin()
  },
  methods: {
    /**
     * 处理堆叠柱状图的series（charts1）
     */
    handleChart1Data() {
      this.chartsData1 = cloneDeep(mockdata.Column)
    },
    /**
     * 处理渐变色数据（charts2）
     */
    handleChart2Data() {
      const linearareadata = {
        categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
        series: [
          {
            name: '成交量A',
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#1890FF', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#FFFFFF', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: [100, 80, 95, 150, 112, 132],
          },
        ],
      }
      this.chartsData2 = linearareadata
    },
    /**
     * 获取索引
     * @param {Object} e
     */
    getIndex(e) {
      this.$u.toast(`${e.seriesName}: ${e.value}`)
    },
  },
}
</script>

<style lang="scss" scoped>
.charts-box {
  width: 100%;
  height: 300px;
}
</style>
